/**
 * Created by liguangsong on 16/8/3.
 */
import React from 'react'
import { Link, hashHistory } from 'react-router'


var lineStyle = {
    position: 'absolute',
    left: '460px',
    width: '2px',
    height: '90px',
    background: 'white',
    top: '100px'
};

var timeQrtStyle =  {
    position: 'absolute',
    textAlign: 'center',
    color: 'white',
    top: '40px',
    width: '100%',
    fontSize: '20px'
};

var GameListView = React.createClass( {
    getInitialState() {
        return {
            opacity: '0'
        }
    },

    render() {
        return (
            <div className="gamesOutSideStyle">
                    <div className="gamesInsideStyle" style={{ background: this.props.teamColor }}>
                        <div style={lineStyle}></div>
                        <p style={timeQrtStyle}>Q4 0:00</p>
                        <p className="gamesLeftPoint">100</p>
                        <p className="gamesLeftPoint" style={{ textAlign: 'left', left: '500px' }}>100</p>
                        <img className="gamesTeamImg" src='app/assist/teamIcon/gsw.png' />
                        <img className="gamesTeamImg" style={{ left: '700px' }} src='app/assist/teamIcon/lal.png' />
                        <p className="gamesTeamCity">Golden State</p>
                        <p className="gamesTeamName">Warriors</p>
                        <p className="gamesTeamCity" style={{ left:'660px' }}>Los Angeles</p>
                        <p className="gamesTeamName" style={{ left:'660px' }}>Lakers</p>
                    </div>
                    <div className="clickBackground" onClick={this.clickGoto}  style={{ opacity: this.state.opacity }}></div>

            </div>
        )
    },

    clickGoto(event) {
        this.setState({
            opacity: '0.3'
        });

        event.preventDefault();
        hashHistory.push('/Game');

    }
});

export default GameListView;